<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/601568 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="499"/>
<h1>10-DOM</h1>
<div>
<table bgcolor="#D4DDE5" border="0">
<tr><td><b>创建时间：</b></td><td><i>2018/4/28 17:40</i></td></tr>
<tr><td><b>更新时间：</b></td><td><i>2020/4/14 16:04</i></td></tr>
<tr><td><b>作者：</b></td><td><i>18081003141@163.com</i></td></tr>
</table>
</div>
<br/>

<div>
<span><div><br clear="none"/></div><div><span style="text-indent: 0pt; font-size: 16pt; color: rgb(1, 1, 1);">DOM（Document Object Model 文档对象模型）</span></div><div><br clear="none"/></div><div><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">DOM定义了表示和修改文档所需的对象、行为和属性，以及这些对象之间的关系。</span></div><div><br/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="text-indent: 0pt; font-size: 14pt; color: rgb(1, 1, 1);">DOM树</span></div><div><img src="00-笔记_files/大树.jpg" type="image/jpeg" data-filename="大树.jpg" style="font-size: 12pt; color: #010101;" width="367"/><img src="00-笔记_files/倒树.jpg" type="image/jpeg" data-filename="倒树.jpg" style="font-size: 12pt; color: #010101;" width="327"/><img src="00-笔记_files/HTML.png" type="image/png" data-filename="HTML.png" width="412"/></div><div><br clear="none"/></div><div><br clear="none" style="font-size: 12pt; color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">给大家讲个故事：</span></div><div><br/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">从前，有一个地主（浏览器）</span></div><div><br/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">家里有一个农场（document）</span></div><div><br/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">农场里有很多土地（div、p、h1-h6...）</span></div><div><br/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">需要雇一个长工给他干活</span></div><div><br/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">这个时候，javascript就来应聘了</span></div><div><br/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">农场主觉得这小伙还不错，功能强大也实诚</span></div><div><br/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">就叫他去地里干活</span></div><div><br/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">js屁颠屁颠就去了</span></div><div><br/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">结果一看，这么多地，我去哪块干活啊？</span></div><div><br/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">农场主说，就那块啊</span></div><div><br/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">到底哪块啊？js蒙圈了</span></div><div><br/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">最后农场主就想了个办法，给所有土地编上编号（id、class、name...）</span></div><div><br/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">并且给js提供了根据编号查找地块的方法</span></div><div><br/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">js利用这些方法很方便的就找到了自己要干活的地方愉快的干起活来了</span></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);"><br/></span></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);"><br/></span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br/></div><div><br/></div><div><br clear="none"/></div><div><span style="text-indent: 0pt; font-size: 14pt; color: rgb(1, 1, 1);">DOM操作</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1); font-weight: bold;">获取DOM节点</span></div><div><br clear="none"/></div><div><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">   1、 document.getElementById(id名)</span></div><div><br clear="none"/></div><div><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">    2、</span><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">getElement</span><span style="text-indent: 0pt; font-size: 12pt; color: rgb(255, 0, 0); font-weight: bold;">s</span><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">ByTagName(标签名)</span></div><div><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">        得到的是一个集合（不止一个，是一堆）</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">    3、</span><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">getElementsByName( ) 通过Name值获取元素，</span><span style="text-indent: 0pt; font-size: 12pt;">返回值</span><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">是</span><span style="text-indent: 0pt; font-size: 12pt; color: rgb(255, 0, 0);">集合</span><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">，通常用来获取</span><span style="text-indent: 0pt; font-size: 12pt; color: rgb(255, 0, 0);">有name的input</span><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">的值；</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">        注：1*不是所有的标签都有name值；</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">               2*低版本的浏览器会有兼容问题；</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1); font-family: &quot;Yu Gothic UI&quot;;">   4、</span><span style="font-size: 12pt; color: rgb(1, 1, 1);"> children属性，获得DOM元素的所有子元素；</span><span style="font-size: 12pt;">返回值</span><span style="font-size: 12pt; color: rgb(1, 1, 1);">是</span><span style="font-size: 12pt; text-indent: 0pt; color: rgb(255, 0, 0);">集合</span></div><div><br clear="none"/></div><div><span style="font-size: 16px; color: rgb(1, 1, 1);">  </span> <span style="font-size: 16px; color: rgb(1, 1, 1);">5、parentNode属性，</span><span style="font-size: 12pt; color: rgb(1, 1, 1);">获得DOM元素的父级元素</span></div><div><br clear="none"/></div><div><span style="font-size: 16px; color: rgb(1, 1, 1);">   6、getElementsByClassName(class名称)</span></div><div><span style="font-size: 16px; color: rgb(1, 1, 1);">        但是：IE8以下不能用</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16px; color: rgb(1, 1, 1);">    7、ES5选择器：</span></div><div><br clear="none" style="font-size: 12pt; color: #010101;"/></div><div><span style="font-size: 16px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(34, 34, 34);">     document.querySelector ()  &gt;  一旦匹配成功一个元素，就不往后匹配了</span></div><div><span style="font-size: 16px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(34, 34, 34);">      document.querySelectorAll ()  &gt;&gt;&gt;&gt; 强大到超乎想象;匹配到所有满足的元素, 支持</span><span style="font-size: 16px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(255, 0, 0);">IE8+</span></div><div><br/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1); font-weight: bold;">属性获取和操作</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">1、getAttribute( )获取元素的属性值，他是</span><span style="font-size: 12pt; color: rgb(255, 122, 116);">节点的方法！所以前缀必须是节点！</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">     document.getElementById( ID值 ).getAttribute( )</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">     什么是元素属性呢？ class就是元素属性，写在标签内的所有东西都是标签属性， 比如</span><span style="font-size: 12pt; color: rgb(255, 122, 116);">link</span><span style="font-size: 12pt; color: rgb(1, 1, 1);">的</span><span style="font-size: 12pt; color: rgb(255, 122, 116);">href</span><span style="font-size: 12pt; color: rgb(1, 1, 1);">比如</span><span style="font-size: 12pt; color: rgb(255, 122, 116);">img</span><span style="font-size: 12pt; color: rgb(1, 1, 1);">的</span><span style="font-size: 12pt; color: rgb(255, 122, 116);">src</span><span style="font-size: 12pt; color: rgb(1, 1, 1);">....都是元素属性。</span></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">    元素自带的属性可以直接用</span> <span style="font-size: 12pt; color: rgb(227, 0, 0); font-weight: bold;">.</span> <span style="font-size: 12pt;">语法获取，但是自定义属性需要 </span><span style="font-size: 12pt; color: rgb(1, 1, 1);">getAttribute() 和 </span><span style="font-size: 12pt; color: rgb(1, 1, 1);">setAttribute( ) 方法</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">2、setAttribute( )设置元素的属性。同上；</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">     有些小小的兼容性问题，低版本IE不兼容；</span></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">     </span><span style="font-size: 12pt; color: rgb(227, 0, 0);">设置的属性永远都是字符串类型</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">3、removeAttribute( )删除属性；同上；</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">     兼容性问题同上；</span></div><div><br clear="none" style="color: #010101;"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">DOM元素类型(元素、文本和属性)</span></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="color: #010101; text-indent: 0pt; font-size: 12pt;">nodeObj.nodeName // 节点名称  </span></div><div><span style="color: #010101; text-indent: 0pt; font-size: 12pt;">/*</span></div><div><span style="color: #010101; text-indent: 0pt; font-size: 12pt;">    元素节点：标签名（大写）</span></div><div><span style="color: #010101; text-indent: 0pt; font-size: 12pt;">    属性节点：属性名称</span></div><div><span style="font-size: 12pt;">    文本节点：#text</span></div><div><span style="font-size: 12pt;">*/</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">nodeObj.nodeType // 1 ==&gt; 元素节点  2 ==&gt; 属性节点  3 ==&gt; 文本节点 </span></div><div style="font-size: 12pt;"><br clear="none"/></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">1、网页换肤</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">2、隔行变色</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt; font-weight: bold;">操作DOM</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">增、删、克隆节点</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;background-color: #fffaa5;-evernote-highlight:true;">创建节点</span></div><div><span style="font-size: 12pt;">var oDiv = document.createElement(&quot;div&quot;);</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;background-color: #fffaa5;-evernote-highlight:true;">克隆节点</span></div><div><span style="font-size: 12pt;">clonedNode = Node.cloneNode(boolean) // 只有一个参数，传入一个布尔值，true表示深客隆，复制该节点下的所有子节点；false表示浅克隆，只复制该节点</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;background-color: #fffaa5;-evernote-highlight:true;">插入节点</span></div><div><span style="font-size: 12pt;">parentNode.appendChild(childNode);  // 将新节点追加到子节点列表的末尾</span></div><div><span style="font-size: 12pt;">parentNode.insertBefore(newNode, targetNode);  //将newNode插入targetNode之前</span></div><div><span style="font-size: 12pt;"> </span></div><div><span style="font-size: 12pt;background-color: #fffaa5;-evernote-highlight:true;">替换节点</span></div><div><span style="font-size: 12pt;">parentNode.replaceChild(newNode, targetNode);    //使用newNode替换targetNode</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;background-color: #fffaa5;-evernote-highlight:true;">移除节点</span></div><div><span style="font-size: 12pt;">parentNode.removeChild(childNode);  // 移除目标节点</span></div><div><span style="font-size: 12pt;">node.parentNode.removeChild(node);    //在不清楚父节点的情况下使用</span></div><div><br clear="none"/></div><div>childNode.remove()  //IE不支持</div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16pt; font-weight: bold;">练习</span></div><div><br clear="none"/></div><div><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">1、</span><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">回到顶部</span></div><div><br clear="none"/></div><div><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">2、</span><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">使用json动态创建表格</span></div><div><span style="text-indent: 0pt; font-size: 10pt; color: rgb(1, 1, 1);"> </span></div><div><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">3、</span><span style="text-indent: 0pt; font-size: 12pt; color: rgb(1, 1, 1);">表格删除操作</span></div><div><span style="text-indent: 0pt; font-size: 12pt;"><br/></span></div><div><span style="text-indent: 0pt; font-size: 12pt;"><br/></span></div><div><span style="text-indent: 0pt; font-size: 12pt;"><br/></span></div><div><span style="font-size: 12pt; font-weight: bold;">node节点</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;"><span style="letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249); font-size: 12pt; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal;">根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：</span><span style="font-size: 12pt; font-weight: bold;"> </span></span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">元素是节点的别称，节点包含元素当然节点还有好多细化的种类；</span></div><div><img src="00-笔记_files/Image.png" type="image/png" data-filename="Image.png" width="566"/></div><div><span style="background-color: #f9f9f9;"><span style="background-color: rgb(249, 249, 249); font-size: 12pt; color: rgb(1, 1, 1);">根节点：root&gt;&gt;&gt;&gt;HTML没有父节点；</span></span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="background-color: #f9f9f9;"><span style="background-color: rgb(249, 249, 249); font-size: 12pt; color: rgb(1, 1, 1);">节点操作：（通过父子系关系）</span></span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">childNodes     获取当前元素的所有子节点；</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">nodeType       节点种类，返回值是数字；</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">nodeValue      获取（文字）节点的文本内容；</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">nodeName     返回node节点名称（#text，注释， 标签....）；</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">一个可以找出元素节点的方法；</span></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);"> </span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">常见的节点类型：</span></div><div><div><br/></div><table style="border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 142px;"></col><col style="width: 333px;"></col></colgroup><tbody><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 142px; padding: 8px;"><div style="text-align: center;"><span style="font-weight: bold;">nodeType值</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 333px; padding: 8px;"><div style="text-align: center;"><span style="font-weight: bold;">含义</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 142px; padding: 8px;"><div>1</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 333px; padding: 8px;"><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">元素（DIV、BODY、LI、SPAN....... ） </span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 142px; padding: 8px;"><div>2</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 333px; padding: 8px;"><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">属性代表属性节点 （class，src，href）</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 142px; padding: 8px;"><div>3</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 333px; padding: 8px;"><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">文本节点（text节点）</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 142px; padding: 8px;"><div>8</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 333px; padding: 8px;"><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">代表注释节点</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 142px; padding: 8px;"><div>9</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 333px; padding: 8px;"><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">代表document节点；</span></div></td></tr></tbody></table><div style="font-size: 12pt;"><br clear="none"/></div><div style="font-size: 12pt;"><br clear="none"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1); font-weight: bold;">innerHTML和nodeValue;(当innerHTML和nodeValue分别作为左值的时候)</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);"> box.innerHTML = '&lt;strong&gt;abc&lt;/strong&gt;';</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);"> box.childNodes[0].nodeValue = '&lt;strong&gt;abc&lt;/strong&gt;';</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(1, 1, 1);">innerHTML会将</span><span style="font-size: 12pt; color: rgb(255, 122, 116);">标签解析</span><span style="font-size: 12pt; color: rgb(1, 1, 1);">；</span></span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(1, 1, 1);">nodeValue不会进行解析，会将标签名</span><span style="font-size: 12pt; color: rgb(255, 122, 116);">转译</span><span style="font-size: 12pt; color: rgb(1, 1, 1);">成字符串，直接输出；</span></span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;"><span style="text-indent: 0pt; font-size: 12pt;"><span style="font-size: 12pt; color: rgb(54, 101, 238);">outerHTML/innerText (非W3C)</span></span></span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1); font-weight: bold;">attributes属性</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">   </span><span style="min-height: 16pt; font-size: 12pt;">var</span> <span style="min-height: 16pt; font-size: 12pt;">oBox</span> <span style="min-height: 16pt; font-size: 12pt;">=</span> <span style="min-height: 16pt; font-size: 12pt;">document</span><span style="min-height: 16pt; font-size: 12pt;">.getElementById(</span><span style="min-height: 16pt; font-size: 12pt;">'box'</span><span style="min-height: 16pt; font-size: 12pt;">);</span></div><div style="min-height: 16pt;"><div><br clear="none"/></div></div><div style="min-height: 16pt;"><span style="min-height: 16pt; font-size: 12pt;">        console</span><span style="min-height: 16pt; font-size: 12pt;">.log(oBox.attributes)                                     </span> <span style="min-height: 16pt; font-size: 12pt;">//  获取所有，该节点的属性信息；</span></div><div style="min-height: 16pt;">  </div><div style="min-height: 16pt;"><span style="font-size: 12pt;"><span style="min-height: 16pt; font-size: 12pt;">        console</span><span style="min-height: 16pt; font-size: 12pt;">.log(oBox.attributes.length);                          </span><span style="min-height: 16pt; font-size: 12pt;">//返回属性节点个数</span></span></div><div style="min-height: 16pt;"><span style="font-size: 12pt;"><span style="min-height: 16pt; font-size: 12pt;">        console</span><span style="min-height: 16pt; font-size: 12pt;">.log(oBox.attributes[</span><span style="min-height: 16pt; font-size: 12pt;">0</span><span style="min-height: 16pt; font-size: 12pt;">]);                                 </span><span style="min-height: 16pt; font-size: 12pt;">//返回第一个属性节点</span></span></div><div style="min-height: 16pt;"><span style="font-size: 12pt;"><span style="min-height: 16pt; font-size: 12pt;">        console</span><span style="min-height: 16pt; font-size: 12pt;">.log(oBox.attributes[</span><span style="min-height: 16pt; font-size: 12pt;">0</span><span style="min-height: 16pt; font-size: 12pt;">].nodeType);                </span><span style="min-height: 16pt; font-size: 12pt;">//2，属性</span></span></div><div style="min-height: 16pt;"><span style="font-size: 12pt;"><span style="min-height: 16pt; font-size: 12pt;">        console</span><span style="min-height: 16pt; font-size: 12pt;">.log(oBox.attributes[</span><span style="min-height: 16pt; font-size: 12pt;">0</span><span style="min-height: 16pt; font-size: 12pt;">].nodeValue);               </span><span style="min-height: 16pt; font-size: 12pt;">//属性值</span></span></div><div style="min-height: 16pt;"><span style="font-size: 12pt;"><span style="min-height: 16pt; font-size: 12pt;">        console</span><span style="min-height: 16pt; font-size: 12pt;">.log(oBox.attributes[</span><span style="min-height: 16pt; font-size: 12pt;">'id'</span><span style="min-height: 16pt; font-size: 12pt;">]);                              </span><span style="min-height: 16pt; font-size: 12pt;">//返回属性为 id 的节点</span></span></div><div style="min-height: 16pt;"> </div><div style="min-height: 16pt;"><span style="font-size: 12pt;"><span style="min-height: 16pt; font-size: 12pt;">        console</span><span style="min-height: 16pt; font-size: 12pt;">.log(oBox.attributes.getNamedItem(</span><span style="min-height: 16pt; font-size: 12pt;">'id'</span><span style="min-height: 16pt; font-size: 12pt;">));     </span><span style="min-height: 16pt; font-size: 12pt;">// 获取 id 的节点；</span></span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">    attributes属性 一般只用作获取，设置使用setAttribute()</span></div><div style="font-size: 12pt;"><br clear="none"/></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">父子节点                                                                   兄弟节点</span></div><div><br clear="none"/></div><div><img src="00-笔记_files/父子.jpg" type="image/jpeg" data-filename="父子.jpg" style="font-size: 12pt; color: #010101;" width="340"/>          <img src="00-笔记_files/兄弟.jpg" type="image/jpeg" data-filename="兄弟.jpg" width="448"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none" style="color: #010101;"/></div><div><span style="letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #f9f9f9;"><span style="background-color: rgb(249, 249, 249); font-size: 12pt; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal;">     父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称      为同胞（兄弟或姐妹）。</span></span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">    childNodes 获取当前元素节点的所有子节点</span></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">   </span></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">    firstChild 获取当前元素节点的第一个子节点</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">    lastChild 获取当前元素节点的最后一个子节点</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">    previousSibling 获取当前节点的前一个同级节点</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">    nextSibling 获取当前节点的后一个同级节点</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt; color: rgb(255, 0, 0);">    ****以上五中方法都包含空白文本节点</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">   firstElementChild   获取当前元素节点的第一个元素子节点</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">    lastElementChild  获取当前元素节点的最后一个元素子节点</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(121, 121, 121);">    ownerDocument 获取该节点的文档根节点，相当与 document</span></span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">    parentNode 获取当前节点的父元素</span></div><div><br clear="none" style="color: #010101;"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">    </span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16px; color: rgb(1, 1, 1);">创建文档碎片</span></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: 微软雅黑;">var cache = document.createDocumentFragment();</span></div><div><span style="font-size: 12pt; font-family: 微软雅黑;">for( var i = 0 ; i &lt; 1000; i ++ ){</span></div><div><span style="font-size: 12pt; font-family: 微软雅黑;">    var opt = document.createElement(&quot;input&quot;);</span></div><div><span style="font-size: 12pt; font-family: 微软雅黑;">    opt.type=&quot;button&quot;;</span></div><div><span style="font-size: 12pt; font-family: 微软雅黑;">    opt.value = &quot;删除&quot;;</span></div><div><span style="font-size: 12pt; font-family: 微软雅黑;">    cache.appendChild(opt);</span></div><div><span style="font-size: 12pt; font-family: 微软雅黑;">}</span></div><div><span style="font-size: 12pt; font-family: 微软雅黑;">document.body.appendChild(cache);</span></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1); font-weight: bold;">++DOM尺寸和位置</span></div><div><span style="font-size: 12pt; color: rgb(1, 1, 1);">    </span></div><div><div><br/></div><table style="border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 234px;"></col><col style="width: 687px;"></col></colgroup><tbody><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 234px; padding: 8px;"><div><span style="-en-paragraph:true;"><span style="font-size: 12pt;">box.style.width</span></span></div><div><span style="-en-paragraph:true;"><span style="font-size: 12pt;">box.style.height</span></span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 687px; padding: 8px;"><div><span style="font-size: 12pt;">只能获取到内联style属性的CSS样式中的宽和高，如果有，获取;如果没有，则返回空</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 234px; padding: 8px;"><div><span style="font-size: 12pt;">getStyle(box,&quot;width&quot;)</span></div><div><span style="font-size: 12pt;">getStyle(box,&quot;width&quot;)</span></div><div>//如下getStyle方法的封装</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 687px; padding: 8px;"><div><span style="font-size: 12pt;">通过计算获取元素的大小，无关你是否是行内、内联或者链接，它经过计算后得到的结果返回出来。如果本身设置大小，它会返回元素的大小，如果本身没有设置，非IE浏览器会返回默认的大小，IE浏览器返回auto。</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 234px; padding: 8px;"><div><span style="-en-paragraph:true;"><span style="font-size: 12pt;">box.clientWidth</span></span></div><div><span style="-en-paragraph:true;"><span style="font-size: 12pt;">box.clientHeight</span></span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 687px; padding: 8px;"><div><span style="font-size: 12pt;">返回了元素大小，但没有单位，默认单位是px，如果设置了其他的单位，比如100em之类，返回出来的结果还会转换为px像素（</span><span style="font-size: 12pt; text-decoration: underline;">不含边框</span><span style="font-size: 12pt;">）</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 234px; padding: 8px;"><div><span style="-en-paragraph:true;"><span style="font-size: 12pt;">box.scrollWidth</span></span></div><div><span style="-en-paragraph:true;"><span style="font-size: 12pt;">box.scrollHeight</span></span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 687px; padding: 8px;"><div><span style="font-size: 12pt;">获取滚动内容的元素大小（当元素出现滚动条时，此属性指全部滚动内容的宽高）</span></div><div><span style="font-size: 12pt;">返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，它会得到计算后的宽度和高度</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 234px; padding: 8px;"><div><span style="-en-paragraph:true;"><span style="font-size: 12pt;">box.offsetWidth</span></span></div><div><span style="-en-paragraph:true;"><span style="font-size: 12pt;">box.offsetHeight</span></span></div><div><br clear="none"/></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 687px; padding: 8px;"><div><span style="font-size: 12pt;">返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，他会得到计算后的宽度和高度</span></div><div><span style="font-size: 12pt;">包含盒模型中除margin以外的宽高（</span><span style="font-size: 12pt; text-decoration: underline;">包含边框</span><span style="font-size: 12pt;">）</span></div><div><span style="background-color: #ffffff;-en-paragraph:true;"><span style="font-size: 12pt; background-color: rgb(255, 255, 255); color: rgb(54, 101, 238);">最稳定，使用最频繁</span></span></div></td></tr></tbody></table><div><br clear="none"/></div></div><div><span style="font-size: 12pt; color: rgb(227, 0, 0);">以上这三对方法都是只读的</span></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 12pt;">- 获取非行内样式（兼容问题）</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">      if(obj.currentStyle){   //针对ie获取非行间样式</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">            return obj.currentStyle[attr];</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">      }else{</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">            return getComputedStyle(obj,false)[attr];   //针对非ie</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">      };</span></div><div><span style="font-family: Monaco; font-size: 12pt;">};</span></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    <span style="font-size: 12pt; font-weight: bold;">位置坐标</span></span></div><div><div><br/></div><table style="border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 206px;"></col><col style="width: 395px;"></col></colgroup><tbody><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 206px; padding: 8px;"><div><span style="font-size: 12pt; font-weight: normal;-en-paragraph:true;">box.clientLeft</span></div><div><span style="font-size: 12pt; font-weight: normal;-en-paragraph:true;">box.clientTop</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 395px; padding: 8px;"><div><span style="font-size: 12pt; font-weight: normal;">获取左边框和</span><span style="font-size: 12pt; font-weight: normal;-en-paragraph:true;">上边框</span><span style="font-size: 12pt; font-weight: normal;">的宽度</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 206px; padding: 8px;"><div><span style="font-size: 12pt; font-weight: normal;-en-paragraph:true;">box.offsetLeft</span></div><div><span style="font-size: 12pt; font-weight: normal;-en-paragraph:true;">box.offsetTop</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 395px; padding: 8px;"><div><span style="font-size: 12pt; font-weight: normal;">获取元素当前相对于offsetParent父元素的位置</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 206px; padding: 8px;"><div><span style="font-size: 12pt; font-weight: normal;-en-paragraph:true;">box.scrollTop</span></div><div><span style="font-size: 12pt; font-weight: normal;-en-paragraph:true;">box.scrollLeft</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 395px; padding: 8px;"><div><span style="font-size: 12pt; font-weight: normal;-en-paragraph:true;">获取滚动内容上方的位置(就是隐藏的内容的高度)</span></div><div><span style="font-size: 12pt; font-weight: normal;-en-paragraph:true;">获取滚动内容左方的位置</span></div></td></tr></tbody></table><div><span style="font-size: 12pt; color: rgb(255, 122, 116); font-weight: bold;"> </span></div><div><span style="font-size: 12pt; color: rgb(255, 122, 116); font-weight: bold;">offsetParent</span> <span style="font-size: 12pt; color: rgb(1, 1, 1); font-weight: bold;">     这个属性的返回值是它根据谁定位的，如果它的所有父元素都没有定位，那么返回body</span></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><img src="00-笔记_files/DOM尺寸表.gif" type="image/gif" data-filename="DOM尺寸表.gif"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16pt;"><span style="font-size: 16pt; font-weight: bold;">练习</span></span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">1、位置动画</span></div><div><span style="font-size: 12pt;">2、全选</span></div><div><span style="font-size: 12pt;">3、TAB切换</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div></span>
</div></body></html> 